<template>
  <div class="app-container">
    <el-card class="box-card" shadow="never">
            <el-steps :active="orderStatus" finish-status="success" class="step">
                <el-step v-for="item in steps" :key="item.title" :title="item.title" :description="item.des"></el-step>
            </el-steps>
        </el-card>

         <el-card shadow="never" class="order_card">
             <div slot="header" class="clearfix">
                 <span class="title">订单信息</span>
                 <!-- 功能区 -->
                 <div class="control">
                   <!-- 收货地址更改按钮 -->
                   <el-button v-show="!isEditable &&  (orderDetail.status == 1 || orderDetail.status==2)" size="small" class="text-two" @click="onEditable">
                       编辑
                   </el-button>
                   <el-button type="primary" v-show="isEditable" size="small" class="text-two" @click="onSaveInfo">
                       保存
                   </el-button>
                   <el-button v-show="isEditable" size="small" class="text-two" @click="onEditable">
                       取消
                   </el-button>

                   <!-- 其它按钮-->
                   <el-button type="primary" v-if="!isEditable &&	orderDetail.status == 2" size="small" @click="sendUp(orderDetail.id)">
                       发货
                   </el-button>

                   <el-button v-if="orderDetail.status ==3" type="warning" size="small" @click="confirmReceipt(orderDetail.id)">
                       确认收货
                   </el-button>

                   <el-button  type="danger"  v-if="!isEditable &&	 orderDetail.status ==1"   size="small" @click="confirmCancel(orderDetail.id)">
                       取消订单
                   </el-button>

                   <el-button  type="info"     size="small" @click="goBack()">
                       返回
                   </el-button>

                 </div>
             </div>

             <!--收货信息 -->
             <el-form ref="editForm"  :model="info" label-width="110px" :inline="false" size="small" class="order_form">
               <h3>收货人信息</h3>
               <el-row :gutter="20">
                  <!--  左边第一列-->
                   <el-col :span="8" :offset="0">

                     <el-form-item label="收货姓名：" prop="name" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
                         <el-input v-model="info.name" v-if="isEditable" size="small" placeholder="请输入" clearable>
                         </el-input>
                         <span v-else>{{orderDetail.consignee || "-"}}</span>
                     </el-form-item>


                     <el-form-item label="联系人电话：" prop="name" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
                         <el-input v-model="info.phone" v-if="isEditable" size="small" placeholder="请输入" clearable>
                         </el-input>
                         <span v-else>{{ orderDetail.phone || "-" }}</span>
                     </el-form-item>

                     <el-form-item label="收货地址：" prop="address" :rules="[  { required: true, message: '该值不能为空', trigger: 'blur' }]">
                         <el-input v-model.trim="info.address" v-if="isEditable" size="small"
                             placeholder="例重庆市渝北区建设花园小区1栋23-2" clearable></el-input>
                         <span v-else>{{ orderDetail.address || "-" }}</span>
                     </el-form-item>

                   </el-col>


                   <!-- 第二列 -->
                   <el-col :span="8" :offset="0">
                     <el-form-item label="订单编号：">
                         {{ orderDetail.number || "-" }}
                         <span class="copy pointer" @click="onCopy(orderDetail.number)">复制</span>
                     </el-form-item>
                     <el-form-item label="下单时间：">{{ orderDetail.orderTime || "-" }}
                     </el-form-item>
                     <el-form-item label="支付时间：">{{ orderDetail.checkoutTime || "-" }}
                     </el-form-item>
                   </el-col>

                   <!-- 第三列 -->
                   <el-col :span="8" :offset="0">
                     <el-form-item label="订单状态：">
                        <span v-if=" orderDetail.status==1">待付款</span>
                        <span v-if=" orderDetail.status==2">待发货</span>
                        <span v-if=" orderDetail.status==3">已派送</span>
                        <span v-if=" orderDetail.status==4">已完成</span>
                        <span v-if=" orderDetail.status==5">已取消</span>
                     </el-form-item>
                     <el-form-item label="支付方式：">{{  payMethodValue }}
                     </el-form-item>
                     <el-form-item label="订单备注：">{{ orderDetail.remark || "-" }}
                     </el-form-item>
                   </el-col>

               </el-row>
             </el-form>

              <div class="dir"></div>
              <h3>商品信息</h3>
              <!-- 商品信息 -->
             <el-table :data="orderDetail.drug" border style="width: 100%"   >
                <template  slot="empty">
                    <div class="data-empty">
                        <img src="@/assets/empty.png" alt="暂无数据" />
                        <span class="empty-text">暂无数据</span>
                    </div>
                </template>

                <el-table-column label="商品图片" width="100">
                      <template slot-scope="scope">
                          <div style="position:relative">
                              <el-image style="width: 50px; height: 50px" :src="scope.row.image"></el-image>
                          </div>
                      </template>
                  </el-table-column>
                  <el-table-column label="商品名称" prop="name"></el-table-column>
                  <el-table-column label="单价（元）">
                      <template slot-scope="scope">
                          <span>￥{{scope.row.amount.toFixed(2)}}</span>
                      </template>
                  </el-table-column>
                  <el-table-column label="数量" prop="number"></el-table-column>
                  <el-table-column label="小计（元）">
                      <template  slot-scope="scope">
                          {{(scope.row.amount * scope.row.number).toFixed(2)}}
                      </template>
                  </el-table-column>
                  <el-table-column label="备注" prop="dishFlavor"></el-table-column>
             </el-table>

              <div class="l_table_footer">
                     <span v-if="orderDetail.status>=2 && orderDetail.status<=4" class="touch_right payPrice"><i>实收金额：</i>¥{{ orderDetail.payPrice || "-" }}</span>
                     <span class="touch_right"><i>商品总价：</i>¥{{ orderDetail.amount }}</span>
              </div>

         </el-card>


  </div>
</template>

<script>
  export default {
    computed:{
      //支付状态
      payMethodValue(){
        if(this.orderDetail.number){
               return this.orderDetail.payReceipt || "-"
          }else{
             return "-"
         }
      }

    },
    data() {
      return {
        steps: [
                {
                    title: "买家下单",
                    des: ""
                },
                {
                    title: "买家付款",
                    des: ""
                },
                {
                    title: "发货",
                    des: ""
                },
                {
                    title: "买家确认收货",
                    des: ""
                },
        ],
         orderDetail: {  status: 1  },
         //收货人信息
        info: { },
        isEditable:false,
        //订单编号
        orderId: undefined,
        orderStatus: 1
      }
    },
    methods:{
       onEditable() {
             this.info = {
                 address: this.orderDetail.address ? this.orderDetail.address.replaceAll(",", "") : '',
                 id: this.orderId,
                 name: this.orderDetail.consignee,
                 phone: this.orderDetail.phone
             };
             if(this.isEditable){
               if(this.$refs['editForm']){
                 this.$refs['editForm'].resetFields()
               }
             }
            this.isEditable = !this.isEditable;
      },
      onSaveInfo(){

      },
      //发货
      sendUp(id){

      },
      //确认收货
      confirmReceipt(id){

      },
      //取消订单
      confirmCancel(id){

      }
    },
    created() {

    }
  }
</script>

<style scoped >

  .app-container{
    background-color: #dedede;
    padding: 0;
    padding-top: 5px;
  }
  .order_card {
      .order_form {
          margin-left: 0;
          margin-right: 0;
      }

      ::v-deep(.el-card__header) {
          border-bottom: none;
          padding: 16px 32px;

          .clearfix {
              display: flex;

              >span {
                  line-height: 24px;
                  color: rgba(0, 0, 0, 0.85);
                  font-size: 16px;
                  font-weight: 700;
              }

              .control {
                  margin-left: auto;
                  padding-top: 5px;
              }
          }
      }

     ::v-deep(.el-card__body) {
          padding-top: 0;
      }

     ::v-deep(.el-form-item__label) {
          display: block;
          text-align: left;
          line-height: 22px;
          font-size: 14px;
      }

      ::v-deep(.el-form-item__content) {
          line-height: 22px;
      }

      .detail_col {
          display: flex;
          flex-direction: column;
          align-items: flex-start;

          ::v-deep(.el-form-item--small.el-form-item) {
              margin-bottom: 10px;
          }

          ::v-deep(.el-form-item__label) {
              padding-right: 5px;
          }
      }

      .copy {
          color: #1890ff;
          margin-left: 8px;
          line-height: 22px;
          font-size: 12px;
      }

      .dir {
          background: #e8e8e8;
          height: 1px;
          width: 100%;
          margin: 24px 0;
      }

      .title {
          font-weight: 700;
          color: rgba(0, 0, 0, 0.85);
          font-size: 16px;
          padding-bottom: 10px;
          display: inline-block;
          margin-top: 20px;
      }

      .tips {
          display: flex;
          align-items: center;

          .to-right {
              margin-left: auto;
          }

          .to-left {
              margin-right: auto;
          }
      }

      .vip-icon {
          img {
              margin: 40px 0 11px;
              height: 32px;
              width: 32px;
          }

          b {
              margin-top: 8px;
              line-height: 32px;
              color: #333;
          }

          .fs28 {
              font-size: 28px;
          }

          .fs22 {
              font-size: 22px;
          }

          .line {
              display: flex;
              align-items: center;
              justify-content: center;
              flex-direction: column;
          }
      }

      .l_table_footer {
          margin-top: 27px;
          width: 100%;
          height: 25px;
          display: flex;
          flex-direction: row-reverse;

          .touch_right {
              display: flex;
              align-items: center;
              font-size: 14px;
              line-height: 22px;
              margin-left: 64px;
              color: rgba(36, 36, 36, 1);

              i {
                  color: rgba(0, 0, 0, 0.65);
                  font-style: normal;
              }

              .question {
                  height: 14px;
                  width: 14px;
                  margin: 5px 0 0 7px;
              }
          }
          .payPrice{
            font-size: 18px;
            font-weight: 700;
          }
      }
  }

  .box-card {
    margin-bottom: 5px;
    .card_header {
        line-height: 32px;
        .flex1{
          flex: 1;
        }
        .warning-text{
          color: #FF8D24;
          padding-left: 22px;
        }
        .selected_text{
          padding-right: 16px;
        }
      }
      .table-query{
        padding-bottom: 30px;
        .el-input{
          width: 200px;
          margin-right: 34px;
        }
      }
  }
</style>

